<template>
	<view class="page">
		<view class="u-tips-phone">当前绑定手机号码:<text>{{nUserPhone}}</text></view>
		
		<view class="g-item">
			<text class="name"> 验 证 码</text>
			<view class="g-info g-price">
				<input type="number" placeholder="请输入验证码" placeholder-style="color:#cecccf" maxlength="6" v-model="nCode">
			</view>
			<button class="u-get-code" @tap="getCode">{{nCountdown ? nCountdown+' s' : '获取验证码'}}</button>
		</view>
        <view class="g-item" @tap="isSelectcard">
        	<text class="name">提现至</text>
        	<view class="g-info"><text>{{sBankType ? sBankType : '请选择到账银行卡'}}</text></view>
        </view>
		<view class="g-take">
        	<view class="name">退取数量</view>
        	<view class="g-price">
				<text class="icon">¥</text><input type="number" placeholder="请输入退取数量" placeholder-style="color:#cecccf" v-model="nPrice">
			</view>
			<view class="red">可退取津贴数量：￥530.00</view>
        </view>
		
		<view class="g-tips">到账时间: <text>2个工作日内</text></view>
		
        <button class="u-finish" @tap="finish()">提 交</button>
		<view class="g-frame-mask" v-if="showPopup"></view>
		<view class="g-frame" v-if="showPopup">
			<view class="m-frame-header">
			    <view class="u-frame-title">提示</view>
			    <image class="u-frame-close" src="@/static/icons/ydt/close.png" mode="widthFix" @tap="togglePopup"></image>
			</view>
			<view class="u-frame-cont">{{freePrice}}</view>
			<view class="m-frame-footer">
			    <view class="u-reset" @tap="togglePopup()">取消</view>
			    <view class="u-confirm" @tap="confirm">确定</view>
			</view>
		</view>
		<view class="m-loading" v-if="isShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
	</view>
</template>

<script>
    import henglang from '@/common/common.js';
	import md5 from '@/common/md5.js';
	export default {
		data() {
			return {
                aType: ['银行卡'],
                sType: '',
                nBank: '',
                nPrice: '',
				userInfo:{},
				sBankType: '',
				selectId: '',
				nZfb: '',
				isShowLoading: false,
				method: '',
				account: '',
				freePrice:'',
				showPopup: false,
				nCode:'',
				nCountdown: 0,
				nUserPhone:'',
				state: 0
			};
		},
        methods: {
			back() {  
			    uni.navigateBack();
			},
			togglePopup() {
			    this.showPopup = !this.showPopup;
			},
			confirm() {
				let that = this
				uni.navigateTo({
					url:`/pages/jewel/agent_jewel/checkpwd?price=${that.nPrice}&account=${that.account}&code=${that.nCode}&pageTpye=agent_takecash`
				})
				that.togglePopup()
			},
            selectType(e) {
				let that = this;
				let cardList = that.userInfo.bank[0];
                that.sType = that.aType[e.target.value];
				if(e.target.value == 0){
					if(cardList){
						that.sBankType = cardList.bank + '（尾号' + cardList.card_no.substring(cardList.card_no.length-4) + '）';
						that.selectId = cardList.id;
					}else{
						henglang.showToast('请绑定银行卡')
						uni.navigateTo({
							url:'/pages/user/settings/bank_card/add_card'
						})
						return
					}
					
				}
            },
			
			//开始选择到账方式
			isSelectcard() {
				if(this.userInfo.bank.length === 0){
					henglang.showToast('请绑定银行卡')
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/user/settings/bank_card/add_card'
						})
					}, 3000)
				}else if(this.userInfo.bank.length > 1){
					uni.navigateTo({
						url:'/pages/jewel/agent_jewel/selectcard?id=' + this.selectId
					})
				}
			},
			//选择银行卡后获取最新的银行卡id
			cardSelect() {
				let that = this;
				let cardList = that.userInfo.bank;
				that.selectId = uni.getStorageSync('selectCardId')
				if(cardList){
					for (let i = 0; i < cardList.length; i++) {
						if (cardList[i].id == that.selectId) {
							that.sBankType = cardList[i].bank +'（尾号'+ cardList[i].card_no.substring(cardList[i].card_no.length-4) + '）';
							break;
						}
					}
				}
 			},
			// 获取验证码
			getCode() {
			    let timer = null;
			    let that = this;
			    if (!this.nCountdown) {
					uni.showLoading({
						title: '正在发送'
					});
					henglang.post('member/sendVerify',{},true,function(res){
						uni.hideLoading()
						if(res.data.code == 0){
							henglang.showToast(res.data.msg,500);
							that.nCountdown = 60;
							timer = setInterval(() => {
							    that.nCountdown = --that.nCountdown;
							    if (!that.nCountdown) {
							        that.nCountdown = false;
							        clearInterval(timer);
							    }
							}, 1000)
						}else{
							henglang.showToast(res.data.msg);
						}
					},function(res){
						henglang.showToast('请求失败');
						that.nCountdown = false;
						clearInterval(timer);
						return;
					});
			    }
			},
            finish() {
				let that = this;
				that.method = 2
				that.account = that.selectId

				if (!henglang.checkCode(that.nCode)) {
                    henglang.showToast('请输入正确的验证码');
                    return;
                }
				if(that.sBankType == ''){
					henglang.showToast('请选择到账银行卡');
					return
				}
                if (!that.nPrice) {
                    henglang.showToast('请输入退取金额！');
                    return;
                }
				if(that.state == 0){
					if(that.nPrice < 100 || that.nPrice > that.userInfo.withdraw){
						henglang.showToast('退取金额应该大于100且小于可退取金额');
						return
					}else if(Number(that.nPrice)%100 !== 0){
						henglang.showToast('每笔退取数量必须是100的倍数')
						return;
					}
				}
				
				uni.hideKeyboard();
				
				//获取手续费
				that.isShowLoading = true;
				henglang.post('withdraw/getPoundage',{money:that.nPrice,type:that.state == 1?1:0},true,function(res){
					that.isShowLoading = false;
					if(res.data.code == 0){
						that.freePrice = res.data.msg
						that.togglePopup()
					}else{
						henglang.showToast(res.data.msg)
					}
				});
				
            },
			getuserCard() {
				let that = this;
				that.isShowLoading = true;
				henglang.get('withdraw/getInfo',{state:that.state},true,function(res){
					that.isShowLoading = false;
					that.userInfo = res.data.data;
					if(that.userInfo.bank.length == 1){
						let cardList = that.userInfo.bank[0] 
						that.sBankType = cardList.bank + '（尾号' + cardList.card_no.substring(cardList.card_no.length-4) + '）';
						that.selectId = cardList.id
					}else{ 
						that.selectId = uni.getStorageSync('selectCardId')
						let cardList = that.userInfo.bank
						for (let i = 0; i < cardList.length; i++) {
							if (cardList[i].id == that.selectId) {
								that.sBankType = cardList[i].bank +'（尾号'+ cardList[i].card_no.substring(cardList[i].card_no.length-4) + '）';
								that.selectId = cardList[i].id
								break;
							}
						}
					}
				});
			},
			
        },
		onLoad(option) {
			let that = this
			that.state = option.state
			that.isShowLoading = true;
			henglang.get('member/hasPaypwd',{},true,function(res){
				that.isShowLoading = false;
				if(!res.data.data.has_paypwd){
					henglang.showToast('请先设置支付密码')
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/user/settings/set_checkpwd'
						})
					}, 3000)
				}
			});
			uni.getStorage({
				key: 'userInfo',
				success: function (res) {
					that.nUserPhone = res.data.mobile.slice(0,3) + '****' + res.data.mobile.slice(7);
				}
			});
		},
		onShow() {
			this.cardSelect();
			this.getuserCard();
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) { 
				uni.navigateTo({
					url:'/pages/user/hl_takedeital'
				})
			}
		},
		
	}
</script>


<style>
	.page{
		background: #f5f5f5;
	}
	.g-item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 91upx;
		background: #ffffff;
		margin-bottom: 19upx;
		padding: 0 56upx;
		position: relative;
		
	}
	.g-item .name{
		width: 120upx;
	}
	.g-take{
		background: #ffffff;
		margin-bottom: 19upx;
		padding: 32rpx 56upx;
	}
	.g-take .g-price{
		display: flex;
		justify-content: left;
		align-items: flex-end;
		padding: 20rpx 0;
		border-bottom: 1px solid #e6e6e6;
		width: 612rpx;
	}
	.g-take .g-price .icon{
		color: #424242;
		font-size: 60rpx;
		height: 70rpx;
		margin-right: 16rpx;
	}
	.g-take .g-price input{
		font-size: 40rpx;
	}
	.g-take .red{
		color: #d71511;
		font-size: 28rpx;
		padding-top: 20rpx;
	}
	.g-tips{
		color: #6f6f6f;
		font-size: 26upx;
		padding: 20rpx 60upx;
	}
	.g-tips text{
		color: #4d4d4d;
	}
	.g-info{
		position: relative;
		display: flex;
		align-items: center;
		width: 67%;
		position: relative;
	}
	.g-info .icon{
		color: #272727;
		font-size: 30upx;
		line-height: 91upx;
		margin-right: 10upx;
	}
	
    .u-finish {
        width: 90%;
        margin:50upx auto;
        background: #d71611;
        color: #fff;
        padding: 12px 0;
        border-radius: 100px;
        box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
	.g-frame {
	    width: 581upx;
	    background: #fff;
	    border-radius: 20upx;
	    position: fixed;
	    top: 50%;
	    overflow: hidden;
	    left: 50%;
		margin-top: -215upx;
		margin-left: -290upx;
		z-index: 12;
	}
	
	.g-frame-mask {
	    background: #000;
	    opacity: .5;
	    height: 100vh;
	    width: 100%;
	    position: fixed;
	    top: 0upx;
		z-index: 11;
	}
	
	.m-frame-header {
	    height: 110upx;
	    width: 100%;
	    background: #d71311;
	    border-top-right-radius: 20upx;
	    border-top-left-radius: 20upx;
		position: relative;
		margin-bottom: 35upx;
	}
	.u-frame-title {
	    width: 100%;
	    text-align: center;
	    color: #fff;
	    line-height: 110upx;
	    font-size: 32upx;
	}
	
	.u-frame-close {
	    width: 42upx;
	    height: 42upx;
	    background-size: 100%;
	    position: absolute;
	    top: 50%;
		margin-top: -21upx;
	    right: 32upx;
	}
	.u-frame-cont{
		text-align: center;
		font-size: 36upx;
		padding-bottom: 35upx;
		line-height: 60upx;
		width: 500upx;
		margin: 0 auto;
	}
	.m-frame-footer {
	    height: 100upx;
	    width: 100%;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		margin-top: 20upx;
	}
	
	.m-frame-footer view {
		flex: 1;
	    line-height: 100upx;
	    text-align: center;
	    font-size: 32upx;
	}
	
	.u-reset {
	    color: #ff0000;
	    background: #fff;
	}
	
	.u-confirm {
	    background: #d71311;
	    color: #fff;
	    border-bottom-right-radius: 16upx;
	}
	.u-tips-phone {
		padding: 20upx 56rpx;
	}
	.u-get-code {
	    border-radius: 4px;
	    color: #fff;
	    background: #f7ba43;
	    padding: 12upx 16upx;
	    position: absolute;
	    z-index: 3;
		right: 60rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	
</style>